<template>

  <div class="main">

    <div style="width: 400px;margin: 150px auto">
      <el-card class="box-card">
        <div style="color: white;font-size: 30px;text-align: center">
          <p style="font-size: 40px;color: #409EFF">欢迎注册</p>

          <el-form ref="form" :rules="rules" :model="form" size="normal" style="padding: 30px">


            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user-solid" placeholder="请输用户名" clearable
                        v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password v-model="form.password"></el-input>
            </el-form-item>

            <el-form-item prop="confirm">
              <el-input prefix-icon="el-icon-lock" placeholder="请确认密码" show-password v-model="form.confirm"></el-input>
            </el-form-item>

            <el-form-item prop="validCode">
              <div style="display: flex">
                <el-input prefix-icon="el-icon-key" placeholder="请输入验证码" style="width: 50%"
                          v-model="form.validCode"></el-input>
                <ValidCode @input="createValidCode"></ValidCode>
              </div>

            </el-form-item>

            <div style="justify-content: center;display: flex">

              <el-button style="width: 50%" @click="registers">注册</el-button>
              <el-button type="primary" style="width: 50%" @click="$router.replace('/login')">去登录</el-button>

            </div>


          </el-form>
        </div>

      </el-card>


    </div>

  </div>

</template>

<script>
import request from "../unitls/request";
import ValidCode from "./ValidCode";

export default {
  name: "Register",
  components: {
    ValidCode
  },
  methods: {
    registers() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let one = this.form.validCode.toUpperCase();
          let two = this.validCode.toUpperCase();
          if (one !== two) {
            this.$message.error("验证码错误")
            return;
          }
          if (this.form.password !== this.form.confirm) {
            this.$notify({
              title: '注册失败',
              message: '两次密码不一致',
              type: 'error'
            });
          } else {
            request.post("/api/user", this.form).then(success => {
              if (success.code === '0') {
                this.$notify({
                  title: '注册成功',
                  message: success.data + '用户已注册',
                  type: 'success'
                });

                this.$router.replace('/login');
              } else {
                this.$notify({
                  title: '注册失败',
                  message: success.msg,
                  type: 'error'
                });
              }
            })
          }


        } else {
          this.$notify({
            title: '格式不正确',
            message: '请检查你的输入',
            type: 'error'
          });
          return false;
        }
      });


    },
    createValidCode(data) {
      this.validCode = data;
    }
  },
  data() {
    return {
      form: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur'}
        ],
        confirm: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur'}
        ],
        validCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, max: 4, message: '长度为 4 个字符', trigger: 'blur'}
        ],
      }
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  /*background-color: skyblue;*/
  overflow: hidden;
}
</style>
